<template>
  <div>
    <vant-navbar style="background-color: #f8f8f8" title="个人信息"></vant-navbar>
    <div class="detail">
        <van-cell :border="false" title="头像" @click="goto(userDetail.headImg,'头像')">
          <img :src="userDetail.headImg" alt>
        </van-cell>
        <van-cell is-link :border="false" title="昵称" @click="goto(userDetail.nickname,'昵称')" :value="userDetail.nickname" />
        <van-cell is-link :border="false" title="微信号" @click="goto('xxxxx','昵称')" value="xxxxx" />
        <van-cell is-link :border="false" title="性别" @click="goto(userDetail.sex,'性别')" :value="userDetail.sex" />
        <van-cell is-link :border="false" title="邮箱" @click="goto(userDetail.emall,'邮箱')" :value="userDetail.emall" />
        <van-cell is-link :border="false" title="地址" @click="goto(userDetail.addressCity,'地址')" :value="userDetail.addressCity" />
        <van-cell is-link :border="false" title="更多信息" to="/index" /><br><br>
        <van-button type="primary" block @click="exit">退出</van-button>
    </div>
  </div>
</template>

<script>
import VantNavbar from '@/components/VantNavbar.vue'

export default {
  components: { VantNavbar, },

  data() {
    return {
       userDetail: this.$store.state.userDetail
    }
  },
  methods: {
    exit() {
      localStorage.removeItem("token");
      this.$router.push('/login')
    },
    goto(value,title) {
      this.$router.push({
        name: 'changeDetail',
        params: {
          value: value,
          title: title,
        },
      })
    }
  }
}
</script>

<style>
.detail{
  margin-top: 46px;
}
.detail .van-cell{
  border-bottom-style:  solid;
  border-bottom-width: 0.1px;
  border-bottom-color: gainsboro;
}
.detail .van-cell img{
  height: 50px;
  width: 50px;
}
</style>